<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>

<body>
    <!-- 饼图 -->
    <div id="bing" style="width: 800px;height:600px;"></div>

    <!-- 折线图 -->
    <div id="zhe" style="width: 800px;height:600px;"></div>

     <!-- 柱状图 -->
    <div id="zhu" style="width: 800px;height:600px;"></div>
</body>
<script type="text/javascript">
    // 饼图
    var myChart = echarts.init(document.getElementById('bing'));
    myChart.setOption({
        series: [
            {
                name: '饼图同学分布',
                type: 'pie',    
                radius: '30%',  
                data: [          
                {value:7, name:'菏泽'},
                {value:4, name:'巨野'},
                {value:4, name:'运城'},
                {value:4, name:'济南'},
                {value:4, name:'烟台'},
                {value:4, name:'临沂'}
                
                ]
            }       
        ]
    })

    // 折线图本周消费
    var myChart = echarts.init(document.getElementById('zhe'));
    var option = {
        title: {
            text: '折线图本周消费'
        },
        legend: {
            data: ['消费']
        },
        xAxis: {
            type: 'category',
            data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六','星期日']
        },
        yAxis: {
            type: 'value'
        },
        series: [
        {
                name: '消费',
                type: 'line',
                data: [20, 26, 15, 35, 23, 42,61]
            },
        ]
    };
    myChart.setOption(option);

    // 柱状图本周消费
    var myChart = echarts.init(document.getElementById('zhu'));
    var option = {
        title: {
            text: '本周消费'
        },
        tooltip: {},
        legend: {
            data: ['柱状图本周消费']
        },
        xAxis: {
            data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六','星期日']
        },
        yAxis: {},
        series: [
            {
                name: '消费',
                type: 'bar',
                data: [20, 26, 15, 35, 23, 42,61]
            },
        ]
        
    };
    myChart.setOption(option);
   
</script>

</html>